<template>
  <div :id="name">
    <div class="filter-container ww-border ww-container-header"style="padding: 10px">
      <el-select v-if="groups.length > 1" class="filter-item" v-model="queryParams.groupId" placeholder="全部门站"
                 @change="selectGroupChange">
        <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <span v-else-if="groups.length === 1">
         {{groups[0].name}}
       </span>
      <el-button class="filter-item pull-right btn-ww" type="primary" @click.native="dialogFormVisible=true">设置表格
      </el-button>
    </div>

    <div style="margin-top: 25px">


      <el-table class="table-border color-none" :data="list" tablekey="2" :row-class-name="tableRowClassName" border
                style="width: 100%" :loading="listLoading">
        <el-table-column type="index" label="No."></el-table-column>
        <el-table-column prop="sn" label="流量表sn" align="center"></el-table-column>
        <el-table-column prop="creation" label="time" align="center"></el-table-column>
        <el-table-column :render-header="headerRender" v-if="item.hide" :key='item.value' align="center"
                         v-for='(item,index) in formHead' :label="item.en">
          <template slot-scope="scope">
            {{zeroVals(item.value,scope.row[item.value])}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="btn-ww" type="primary" @click="pushToHistory(scope.row.sn)">历史记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
                       :current-page.sync="queryParams.pageNumber"
                       :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="请选择流量表要展示的数据条目" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" label-position="left" label-width="100px"
               style='width: 400px; margin-left:50px;'>
        <el-checkbox-group v-model="formThead">
          <!--@change="selectItmesChange"-->
          <el-checkbox v-if="!item.hide" :label="item" :value="item" :key="item.value" v-for="item in headerData">
            {{item.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectItmesChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {fetchList} from '../../api/group'
  import {getHistory, getDeviceByGroupId} from '../../api/device'
  import {headerData, deviceKeyEnVal, units, zeroVals, hisData1} from '../device/communicate/HeaderData'
  import {fromat} from '../../utils/index'
  import {indexTableData} from './data'

  export default {
    name: 'timedata-role-user',
    data() {
      return {
        name: '实时数据-门站管理员',
        headerData,
        deviceKeyEnVal,
        formThead: headerData,
        hisData: hisData1,
        date: [],
        groups: [],
        dialogFormVisible: false,
        deviceList: [],
        queryParams: {
          groupId: '',
          pageNumber: 1,
          pageSize: 10
        },
        format: 'yyyy-MM-dd HH:mm:ss',
        formHead: [],
        value5: '',
        total: 0,
        list: indexTableData,
        listLoading: false
      }
    },
    methods: {
      pushToHistory(sn) {
        console.log('sss ' + sn)
        if (sn) {
          this.$router.push('/timedata/history?sn=' + sn)
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {
          return 'warning-row'
        }
        return ''
      },
      selectItmesChange() {
        localStorage.setItem('current-items', JSON.stringify(this.formThead))
        this.dialogFormVisible = false
      },
      selectGroupChange(groupId) {
        this.queryParams.groupId = groupId
        this.queryParams.pageNumber = 1
        this.getDevices()
      },
      getDevices() {
        getDeviceByGroupId(this.queryParams.groupId).then(res => {
          this.deviceList = res.data
        })
      },
      headerRender(h, {column, $index}) {
        let unit = ''
        if (units[column.label]) {
          unit = '(' + units[column.label] + ')'
        }
        const label = column.label + unit
        return h('el-tooltip', {
            props: {
              content: deviceKeyEnVal[column.label] || column.label,
              placement: 'top'
            }
          },
          [h('span', {
            style: {
              margin: '0 5px',
              display: 'inline-block',
              width: '100%'
            }
          }, label)])
      },
      parseTime: fromat,
      zeroVals,
      handleSizeChange(size) {
        this.query.pageSize = size
        this.getHistoryInfo()
      },
      handlePageChange(page) {
        this.query.pageNumber = page
        this.getHistoryInfo()
      },
      search() {
        if (!this.query.startTime || !this.query.endTime) {
          this.$message.error('起始时间和终止时间不能为空！')
          return
        }
        this.query.pageNumber = 1
        this.query.pageSize = 20
        this.getHistoryInfo()
      },
      getGroups() {
        this.listLoading = true
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
          }
          this.groups = data.data
          this.queryParams.groupId = this.groups[0] ? this.groups[0].id : ''
          this.getDevices()
          this.listLoading = false
        })
      },
      getHistoryInfo() {
        if (!this.query.sn) {
          this.$message.error('sn不能为空')
          return
        }
        this.listLoading = true
        getHistory(this.query).then(response => {
          this.list = response.data.content
          this.total = response.data.totalElements
          this.listLoading = false
        })
      }
    },
    created() {
      this.getGroups()
      const obj = JSON.parse(localStorage.getItem('current-items')) || this.headerData
      if (obj) {
        this.formHead = []
        obj.forEach((val) => {
          if (val.index >= 0) {
            this.formHead.push(this.headerData[val.index])
          }
        })
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
</style>
